<template>
    <div class="bs-row-title">
        <LabelRow v-on:onMore="onMore" v-bind:label="label" text="更多>>"></LabelRow>
        <ul class="guid-ul">
            <li v-on:click="onItem" v-for="(item,index) in dataList" :key="index" class="guid-li">
                <div class="guid-li-item" :class="{ zjborder:item.status==6}">
                    <div class="title-row">
                        <div class="title-bg">{{item.handleInfoName||'-'}}</div>
                        <div class="title-date">
                            <div class="text-over date-text">{{getTimeStr(item.createTime)}}</div>

                        </div>
                    </div>
                    <div class="bj-content">
                        {{item.applyPersonName}}
                    </div>
                    <div class="footer-row">
                        <button :class="{ yellow:item.status==6}">{{item.status==6?'已取证':'已制证'}}</button>
                        <div>
                            <span class="m-r-10">{{item.handlePersonName}}</span>
                            <span>{{item.handlePersonTelNo}}</span>
                        </div>
                    </div>
                </div>
            </li>
            <div v-if="!dataList.length" class="no-data">
                <img src="../../assets/no-data.png" alt="">
            </div>
        </ul>
    </div>
</template>
<script>
import LabelRow from "../common/labelRow.vue";
import Pubsub from "../../utils/pubsub";
import { getMyMake } from "../../config/api.js";
import { getTimeStr } from "../../utils/index.js";
export default {
    components: {
        LabelRow
    },
    data() {
        return {
            getTimeStr,
            label: {
                url: require("../../assets/acceptWorkbench/wdbj-icon.png"),
                label: "我的办件"
            },
            dataList: []
        };
    },
    methods: {
        onMore() {
            this.$router.push("/gov/permitRecord");
        },
        onItem() {
            Pubsub.publish("showGuidDialog");
        },
        getList() {
            getMyMake({ pageNum: 1, pageSize: 4 }).then(
                (res = {}) => {
                    console.log(res,"rrr")
                    this.dataList = res.rows;
                }
            );
        }
    },
    created() {
        this.getList();
    }
};
</script>

<style lang="scss" scoped>
@import "../../css/unifyAcceptWorkbench.scss";
.guid-ul {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    padding: 0 5px 15px 5px;
    height: 294px;
    box-sizing: border-box;
}
.guid-li {
    height: 125px;
    width: 50%;
    padding: 0 25px;
    box-sizing: border-box;
    margin-top: 15px;
    cursor: pointer;
    .zjborder {
        border-color: #1a36a9;
    }
    &-item {
        border: 1px solid #1b9e78;
        background-color: #fff;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .title-row {
        display: flex;
        .title-bg {
            flex: 1.5;
            height: 28px;
            line-height: 28px;
            padding-left: 10px;

            background: url("../../assets/acceptWorkbench/title-bg.png")
                no-repeat;
            background-size: 100% 100%;
        }
        .title-date {
            flex: 1;
            width: 0;
        }
        .date-text {
            padding-right: 10px;
            text-align: right;
        }
    }

    .bj-content {
        flex: 1;
        padding-left: 25px;
        padding-top: 20px;
    }
    .footer-row {
        display: flex;
        justify-content: space-between;
        line-height: 28px;
        padding-right: 10px;
        button {
            height: 28px;
            width: 60px;
            background: #1a36a9;

            color: #fff;
            &.green {
                background: #1b9e78;
            }
            &.yellow {
                background: #1b9e78;
            }
        }
    }
}
.bs-row-title {
    flex: 1;
    background: #fff;
}
.square {
    height: 13px;
    width: 13px;
    background: #0a1d69;
    transform: rotate(45deg);
    margin-right: 12px;
    display: block;
}
</style>
